<i18n locale="zh-CN" lang="yaml">
UI Color Flavor           : UI 色彩方案
Custom Site Title         : 自定义网站标题
Custom Site Favicon       : 自定义网站 Favicon
Custom Site Logo          : 自定义网站 Logo
Notice Bar                : 顶部提示栏
Doc Link in Navi Bar      : 导航栏文档链接
Local Func Task Record    : 本地函数任务记录
Guance Data Upload        : 观测云数据上报
Official Script Market    : 官方脚本市场
Hide Following Script Sets: 隐藏下列脚本集

Delete Image          : 删除图片
Show Advanced Settings: 显示高级设置
Hide Advanced Settings: 隐藏高级设置
Advanced Settings     : 高级设置

Flavor                     : 方案
Enable                     : 启用
Text                       : 文案
Color                      : 颜色
Image                      : 图片
URL                        : URL 地址
DataKit / DataWay URL      : DataKit / DataWay URL 地址
From Official Script Market: 来自官方脚本市场
Builtin                    : 内置脚本集
Site Name                  : 站点名

Drag file to here, or click here to upload: 将文件拖到此处，或点击此处上传
'System Setting Saved. Page will be refreshed soon...': '系统设置已保存，页面即将刷新...'

Use the specified text as the site title                 : 使用指定的文案作为网站标题
Use the specified image as the site icon (favicon)       : 使用指定的图片作为网站图标（favicon）
Use the specified image as the system Logo               : 使用指定的图片作为网站 Logo
Show a fixed alert bar at the top of all pages           : 在所有页面顶部展示固定的提示栏
Show a Document Link to the specified URL in the Navi Bar: 在导航栏展示文档链接，点击后可以跳转至指定的 URL 地址
Save Func Task Records in database of this system        : 将函数任务记录保存在本系统的数据库中
If disabled, all Func Task Records will be cleared       : 禁用后会清空所有函数任务记录数据
Upload the self-monitor data to the Guance   : 将自监控数据上报到观测云
Site Name will be added to tags.site_name                : 站点名会被添加至 tags.site_name
Show quick creation button for Official Script Market    : 显示官方脚本市场快捷创建按钮
Some Scripts should be avoided for direct modification, if you need to review them, please turn on the following options: 部分脚本应当避免直接修改，如果需要查看，请开启以下选项

If you don't know the meaning of these configurations, please don't make any changes!: 如果您不知道这些配置的意义，请不要作任何修改！

Please input DataFlux Func ID                        : 请输入 DataFlux Func ID
'This DataFlux Func ID should starts with "{prefix}"': 'DataFlux Func ID 必须以 "{prefix}" 开头'

Save and Refresh: 保存并刷新
</i18n>

<!-- Generated by OpenCC START -->
<i18n locale="zh-HK" lang="yaml">
Advanced Settings: 高級設置
Builtin: 內置腳本集
Color: 顏色
Custom Site Favicon: 自定義網站 Favicon
Custom Site Logo: 自定義網站 Logo
Custom Site Title: 自定義網站標題
DataKit / DataWay URL: DataKit / DataWay URL 地址
Delete Image: 刪除圖片
Doc Link in Navi Bar: 導航欄文檔鏈接
Drag file to here, or click here to upload: 將文件拖到此處，或點擊此處上傳
Enable: 啓用
Flavor: 方案
From Official Script Market: 來自官方腳本市場
Guance Data Upload: 觀測雲數據上報
Hide Advanced Settings: 隱藏高級設置
Hide Following Script Sets: 隱藏下列腳本集
If disabled, all Func Task Records will be cleared: 禁用後會清空所有函數任務記錄數據
If you don't know the meaning of these configurations, please don't make any changes!: 如果您不知道這些配置的意義，請不要作任何修改！
Image: 圖片
Local Func Task Record: 本地函數任務記錄
Notice Bar: 頂部提示欄
Official Script Market: 官方腳本市場
Please input DataFlux Func ID: 請輸入 DataFlux Func ID
Save Func Task Records in database of this system: 將函數任務記錄保存在本系統的數據庫中
Save and Refresh: 保存並刷新
Show Advanced Settings: 顯示高級設置
Show a Document Link to the specified URL in the Navi Bar: 在導航欄展示文檔鏈接，點擊後可以跳轉至指定的 URL 地址
Show a fixed alert bar at the top of all pages: 在所有頁面頂部展示固定的提示欄
Show quick creation button for Official Script Market: 顯示官方腳本市場快捷創建按鈕
Site Name: 站點名
Site Name will be added to tags.site_name: 站點名會被添加至 tags.site_name
Some Scripts should be avoided for direct modification, if you need to review them, please turn on the following options: 部分腳本應當避免直接修改，如果需要查看，請開啓以下選項
System Setting Saved. Page will be refreshed soon...: 系統設置已保存，頁面即將刷新...
Text: 文案
This DataFlux Func ID should starts with "{prefix}": DataFlux Func ID 必須以 "{prefix}" 開頭
UI Color Flavor: UI 色彩方案
URL: URL 地址
Upload the self-monitor data to the Guance: 將自監控數據上報到觀測雲
Use the specified image as the site icon (favicon): 使用指定的圖片作為網站圖標（favicon）
Use the specified image as the system Logo: 使用指定的圖片作為網站 Logo
Use the specified text as the site title: 使用指定的文案作為網站標題
</i18n>
<i18n locale="zh-TW" lang="yaml">
Advanced Settings: 高階設定
Builtin: 內建指令碼集
Color: 顏色
Custom Site Favicon: 自定義網站 Favicon
Custom Site Logo: 自定義網站 Logo
Custom Site Title: 自定義網站標題
DataKit / DataWay URL: DataKit / DataWay URL 地址
Delete Image: 刪除圖片
Doc Link in Navi Bar: 導航欄文件連結
Drag file to here, or click here to upload: 將檔案拖到此處，或點選此處上傳
Enable: 啟用
Flavor: 方案
From Official Script Market: 來自官方指令碼市場
Guance Data Upload: 觀測雲資料上報
Hide Advanced Settings: 隱藏高階設定
Hide Following Script Sets: 隱藏下列指令碼集
If disabled, all Func Task Records will be cleared: 禁用後會清空所有函式任務記錄資料
If you don't know the meaning of these configurations, please don't make any changes!: 如果您不知道這些配置的意義，請不要作任何修改！
Image: 圖片
Local Func Task Record: 本地函式任務記錄
Notice Bar: 頂部提示欄
Official Script Market: 官方指令碼市場
Please input DataFlux Func ID: 請輸入 DataFlux Func ID
Save Func Task Records in database of this system: 將函式任務記錄儲存在本系統的資料庫中
Save and Refresh: 儲存並重新整理
Show Advanced Settings: 顯示高階設定
Show a Document Link to the specified URL in the Navi Bar: 在導航欄展示文件連結，點選後可以跳轉至指定的 URL 地址
Show a fixed alert bar at the top of all pages: 在所有頁面頂部展示固定的提示欄
Show quick creation button for Official Script Market: 顯示官方指令碼市場快捷建立按鈕
Site Name: 站點名
Site Name will be added to tags.site_name: 站點名會被新增至 tags.site_name
Some Scripts should be avoided for direct modification, if you need to review them, please turn on the following options: 部分指令碼應當避免直接修改，如果需要檢視，請開啟以下選項
System Setting Saved. Page will be refreshed soon...: 系統設定已儲存，頁面即將重新整理...
Text: 文案
This DataFlux Func ID should starts with "{prefix}": DataFlux Func ID 必須以 "{prefix}" 開頭
UI Color Flavor: UI 色彩方案
URL: URL 地址
Upload the self-monitor data to the Guance: 將自監控資料上報到觀測雲
Use the specified image as the site icon (favicon): 使用指定的圖片作為網站圖示（favicon）
Use the specified image as the system Logo: 使用指定的圖片作為網站 Logo
Use the specified text as the site title: 使用指定的文案作為網站標題
</i18n>
<!-- Generated by OpenCC END -->

<template>
  <transition name="fade">
    <el-container direction="vertical" v-show="$store.state.isLoaded">
      <!-- Header area -->
      <el-header height="60px">
        <h1>{{ $t('System Setting') }}</h1>
      </el-header>

      <!-- Setup area -->
      <el-main>
        <el-row :gutter="20">
          <el-col :span="15">
            <div class="setup-form">
              <el-form ref="form" label-width="135px" :model="form">
                <!-- UI Color Flavor  -->
                <el-divider content-position="left"><h1>{{ $t('UI Color Flavor') }}</h1></el-divider>

                <el-form-item :label="$t('Flavor')" prop="UI_COLOR_FLAVOR">
                  <el-select v-model="form['UI_COLOR_FLAVOR']">
                    <el-option v-for="f in C.UI_COLOR_FLAVOR" :label="f.name" :key="f.key" :value="f.key">
                      <div class="ui-color-flavor-item">
                        <div :style="{ backgroundColor: f.sampleColor[$store.getters.uiThemeResolved] }"></div>
                        <span>{{ f.name }}</span>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>

                <!-- Custom Site Title -->
                <el-divider content-position="left"><h1>{{ $t('Custom Site Title') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Use the specified text as the site title')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="CUSTOM_SITE_TITLE_ENABLED">
                  <el-select v-model="form['CUSTOM_SITE_TITLE_ENABLED']" :class="enableClass(form['CUSTOM_SITE_TITLE_ENABLED'])">
                    <el-option :label="$t('Enabled')"  key="true"  :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <template v-if="form['CUSTOM_SITE_TITLE_ENABLED'] === true">
                  <el-form-item :label="$t('Text')" prop="CUSTOM_SITE_TITLE_TEXT">
                    <el-input v-model="form['CUSTOM_SITE_TITLE_TEXT']"></el-input>
                  </el-form-item>
                </template>

                <!-- Custom Site Favicon -->
                <el-divider content-position="left"><h1>{{ $t('Custom Site Favicon') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Use the specified image as the site icon (favicon)')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="CUSTOM_FAVICON_ENABLED">
                  <el-select v-model="form['CUSTOM_FAVICON_ENABLED']" :class="enableClass(form['CUSTOM_FAVICON_ENABLED'])">
                    <el-option :label="$t('Enabled')"  key="true"  :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <template v-if="form['CUSTOM_FAVICON_ENABLED'] === true">
                  <el-form-item :label="$t('Image')" prop="CUSTOM_FAVICON_IMAGE_SRC">
                    <el-upload drag ref="CUSTOM_FAVICON_IMAGE_SRC"
                      :limit="2"
                      :multiple="false"
                      :auto-upload="false"
                      :show-file-list="false"
                      :accept="['.jpg', '.jpeg', '.png', '.gif', 'ico']"
                      :on-change="onCustomFaviconChange">
                      <div v-if="form.CUSTOM_FAVICON_IMAGE_SRC" class="image-preview">
                        <img :src="form.CUSTOM_FAVICON_IMAGE_SRC" />
                      </div>
                      <template v-else>
                        <i class="fa fa-cloud-upload"></i>
                        <div class="el-upload__text">{{ $t('Drag file to here, or click here to upload') }}</div>
                      </template>
                    </el-upload>
                    <el-button v-if="form.CUSTOM_FAVICON_IMAGE_SRC"
                      type="text"
                      @click="removeImage('CUSTOM_FAVICON_IMAGE_SRC')">
                      {{ $t('Delete Image') }}
                    </el-button>
                  </el-form-item>
                </template>

                <!-- Custom Site Logo -->
                <el-divider content-position="left"><h1>{{ $t('Custom Site Logo') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Use the specified image as the system Logo')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="CUSTOM_LOGO_ENABLED">
                  <el-select v-model="form['CUSTOM_LOGO_ENABLED']" :class="enableClass(form['CUSTOM_LOGO_ENABLED'])">
                    <el-option :label="$t('Enabled')"  key="true"  :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <template v-if="form['CUSTOM_LOGO_ENABLED'] === true">
                  <el-form-item :label="$t('Image')" prop="CUSTOM_LOGO_IMAGE_SRC">
                    <el-upload drag ref="CUSTOM_LOGO_IMAGE_SRC"
                      :limit="2"
                      :multiple="false"
                      :auto-upload="false"
                      :show-file-list="false"
                      :accept="['.jpg', '.jpeg', '.png', '.gif']"
                      :on-change="onCustomLogoChange">
                      <div v-if="form.CUSTOM_LOGO_IMAGE_SRC" class="image-preview">
                        <img :src="form.CUSTOM_LOGO_IMAGE_SRC" />
                      </div>
                      <template v-else>
                        <i class="fa fa-cloud-upload"></i>
                        <div class="el-upload__text">{{ $t('Drag file to here, or click here to upload') }}</div>
                      </template>
                    </el-upload>
                    <el-button v-if="form.CUSTOM_LOGO_IMAGE_SRC"
                      type="text"
                      @click="removeImage('CUSTOM_LOGO_IMAGE_SRC')">
                      {{ $t('Delete Image') }}
                    </el-button>
                  </el-form-item>
                </template>

                <!-- Notice Bar -->
                <el-divider content-position="left"><h1>{{ $t('Notice Bar') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Show a fixed alert bar at the top of all pages')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="NOTICE_BAR_ENABLED">
                  <el-select v-model="form['NOTICE_BAR_ENABLED']" :class="enableClass(form['NOTICE_BAR_ENABLED'])">
                    <el-option :label="$t('Enabled')"  key="true"  :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <template v-if="form['NOTICE_BAR_ENABLED'] === true">
                  <el-form-item :label="$t('Text')" prop="NOTICE_BAR_TEXT">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2 }"
                      v-model="form['NOTICE_BAR_TEXT']"></el-input>
                  </el-form-item>

                  <el-form-item :label="$t('Color')" prop="NOTICE_BAR_COLOR">
                    <el-color-picker
                      :predefine="colorPanel"
                      color-format="rgb"
                      @active-change="onNoticeBarColorChange"
                      v-model="form['NOTICE_BAR_COLOR']"></el-color-picker>
                  </el-form-item>
                </template>

                <!-- Doc Link in Navi Bar -->
                <el-divider content-position="left"><h1>{{ $t('Doc Link in Navi Bar') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Show a Document Link to the specified URL in the Navi Bar')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="NAVI_DOC_LINK_ENABLED">
                  <el-select v-model="form['NAVI_DOC_LINK_ENABLED']" :class="enableClass(form['NAVI_DOC_LINK_ENABLED'])">
                    <el-option :label="$t('Enabled')"  key="true"  :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <template v-if="form['NAVI_DOC_LINK_ENABLED'] === true">
                  <el-form-item :label="$t('URL')" prop="NAVI_DOC_LINK_URL">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2 }"
                      v-model="form['NAVI_DOC_LINK_URL']"></el-input>
                  </el-form-item>
                </template>

                <!-- Local Func Task Record -->
                <el-divider content-position="left"><h1>{{ $t('Local Func Task Record') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Save Func Task Records in database of this system')" />
                  <InfoBlock type="warning" :title="$t('If disabled, all Func Task Records will be cleared')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="LOCAL_FUNC_TASK_RECORD_ENABLED">
                  <el-select v-model="form['LOCAL_FUNC_TASK_RECORD_ENABLED']" :class="enableClass(form['LOCAL_FUNC_TASK_RECORD_ENABLED'])">
                    <el-option :label="$t('Enabled')"  key="true"  :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <!-- Guance Data Upload -->
                <el-divider content-position="left"><h1>{{ $t('Guance Data Upload') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Upload the self-monitor data to the Guance')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="GUANCE_DATA_UPLOAD_ENABLED">
                  <el-select v-model="form['GUANCE_DATA_UPLOAD_ENABLED']" :class="enableClass(form['GUANCE_DATA_UPLOAD_ENABLED'])">
                    <el-option :label="$t('Enabled')" key="true"   :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <template v-if="form['GUANCE_DATA_UPLOAD_ENABLED'] === true">
                  <el-form-item :label="$t('URL')" prop="GUANCE_DATA_UPLOAD_URL">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2 }"
                      v-model="form['GUANCE_DATA_UPLOAD_URL']"></el-input>
                    <InfoBlock :title="`DataWay${':'} http://openway.guance.con?token=tkn_xxxxx`" />
                    <InfoBlock :title="`DataKit${':'} http://datakit-ip-or-domain:9529`" />
                  </el-form-item>

                  <el-form-item :label="$t('Site Name')" prop="GUANCE_DATA_SITE_NAME">
                    <el-input v-model="form['GUANCE_DATA_SITE_NAME']"></el-input>
                    <InfoBlock :title="$t('Site Name will be added to tags.site_name')" />
                  </el-form-item>
                </template>

                <!-- Official Script Market -->
                <el-divider content-position="left"><h1>{{ $t('Official Script Market') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock :title="$t('Show quick creation button for Official Script Market')" />
                </el-form-item>

                <el-form-item :label="$t('Enable')" prop="OFFICIAL_SCRIPT_MARKET_ENABLED">
                  <el-select v-model="form['OFFICIAL_SCRIPT_MARKET_ENABLED']" :class="enableClass(form['OFFICIAL_SCRIPT_MARKET_ENABLED'])">
                    <el-option :label="$t('Enabled')" key="true"   :value="true"></el-option>
                    <el-option :label="$t('Disabled')" key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <!-- Hide Script Sets -->
                <el-divider content-position="left"><h1>{{ $t('Hide Following Script Sets') }}</h1></el-divider>

                <el-form-item>
                  <InfoBlock type="warning" :title="$t('Some Scripts should be avoided for direct modification, if you need to review them, please turn on the following options')" />
                </el-form-item>

                <el-form-item :label="$t('From Official Script Market')" prop="SCRIPT_SET_HIDDEN_OFFICIAL_SCRIPT_MARKET">
                  <el-select v-model="form['SCRIPT_SET_HIDDEN_OFFICIAL_SCRIPT_MARKET']" :class="enableClass(form['SCRIPT_SET_HIDDEN_OFFICIAL_SCRIPT_MARKET'])">
                    <el-option :label="$t('Hidden')" key="true"  :value="true"></el-option>
                    <el-option :label="$t('Shown')"  key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item :label="$t('Builtin')" prop="SCRIPT_SET_HIDDEN_BUILTIN">
                  <el-select v-model="form['SCRIPT_SET_HIDDEN_BUILTIN']" :class="enableClass(form['SCRIPT_SET_HIDDEN_BUILTIN'])">
                    <el-option :label="$t('Hidden')" key="true"  :value="true"></el-option>
                    <el-option :label="$t('Shown')"  key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item :label="$t('Blueprint')" prop="SCRIPT_SET_HIDDEN_BLUEPRINT">
                  <el-select v-model="form['SCRIPT_SET_HIDDEN_BLUEPRINT']" :class="enableClass(form['SCRIPT_SET_HIDDEN_BLUEPRINT'])">
                    <el-option :label="$t('Hidden')" key="true"  :value="true"></el-option>
                    <el-option :label="$t('Shown')"  key="false" :value="false"></el-option>
                  </el-select>
                </el-form-item>

                <template v-if="showAdvancedSettings">
                  <!-- Advanced Settings -->
                  <el-divider content-position="left"><h1 class="text-bad">{{ $t('Advanced Settings') }}</h1></el-divider>

                  <el-form-item>
                    <InfoBlock type="error" :title="$t('If you don\'t know the meaning of these configurations, please don\'t make any changes!')" />
                  </el-form-item>

                  <el-form-item :label="$t('DataFlux Func ID')" prop="DATAFLUX_FUNC_ID">
                    <el-input v-model="form['DATAFLUX_FUNC_ID']"></el-input>
                  </el-form-item>
                </template>

                <el-divider />

                <el-form-item>
                  <el-button @click="showAdvancedSettings = !showAdvancedSettings">{{ showAdvancedSettings ? $t('Hide Advanced Settings') : $t('Show Advanced Settings') }}</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="9" class="hidden-md-and-down">
          </el-col>
        </el-row>
      </el-main>

      <!-- Footer -->
      <el-footer>
        <div class="setup-page-footer">
          <el-button type="primary" v-prevent-re-click @click="submitData">{{ $t('Save and Refresh') }}</el-button>
        </div>
      </el-footer>
    </el-container>
  </transition>
</template>

<script>
export default {
  name: 'SystemSetting',
  components: {
  },
  watch: {
    $route: {
      immediate: true,
      async handler(to, from) {
        await this.loadData();
      },
    },
    show(val) {
      if (val && this.$refs.form) {
        this.$refs.form.clearValidate();
      }
    },
    'form.DATAFLUX_FUNC_ID'(val) {
      if (!val || val.length < this.DATAFLUX_FUNC_ID_PREFIX.length || val.indexOf(this.DATAFLUX_FUNC_ID_PREFIX) < 0) {
        this.form.DATAFLUX_FUNC_ID = this.DATAFLUX_FUNC_ID_PREFIX;
      }
    }
  },
  methods: {
    async loadData() {
      await this.$store.dispatch('loadSystemInfo');

      const systemSettings = this.T.jsonCopy(this.$store.getters.SYSTEM_SETTINGS())
      for (let k in systemSettings) {
        this.$set(this.data, k, systemSettings[k]);
        this.$set(this.form, k, systemSettings[k]);
      }

      this.$store.commit('updateLoadStatus', true);
    },
    async submitData() {
      try {
        await this.$refs.form.validate();
      } catch(err) {
        return console.error(err);
      }

      return await this.setData();
    },
    async setData() {
      let apiRes = null;
      for (let id in this.form) {
        let v = this.form[id]
        let value = this.T.isNothing(v) ? null : v;

        // Skip if no changing
        if (value === this.data[id]) continue;

        // Add http:// for URL
        if (id.slice(-4) === '_URL' && value && !value.match(/^\w+:\/\//g)) {
          value = `http://${value}`;
        }

        apiRes = await this.T.callAPI('post', '/api/v1/system-settings/:id/do/set', {
          params: { id: id },
          body  : { data: { value: value } },
        });
        if (!apiRes || !apiRes.ok) return;
      }

      if (!apiRes || apiRes.ok) {
        await this.T.alert(this.$t('System Setting Saved. Page will be refreshed soon...'), 'success');
        location.reload();
      }
    },
    enableClass(val) {
      if (val === true) {
        return 'setting-enabled';
      } else if (val === false) {
        return 'setting-disabled';
      } else {
        return '';
      }
    },

    onCustomBase64ImageChange(file, fileList, key) {
      let self = this;

      if (fileList.length > 1) fileList.splice(0, 1);

      let reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        this.form[key] = reader.result;
      };
    },
    onCustomFaviconChange(file, fileList) {
      return this.onCustomBase64ImageChange(file, fileList, 'CUSTOM_FAVICON_IMAGE_SRC');
    },
    onCustomLogoChange(file, fileList) {
      return this.onCustomBase64ImageChange(file, fileList, 'CUSTOM_LOGO_IMAGE_SRC');
    },
    onNoticeBarColorChange(color) {
      this.form.NOTICE_BAR_COLOR = color;
    },

    removeImage(imageKey) {
      if (this.form[imageKey]) {
        this.form[imageKey] = null;
      }

      let upload = this.$refs[imageKey];
      if (upload) {
        upload.clearFiles();
      }
    },
  },
  computed: {
    DATAFLUX_FUNC_ID_PREFIX() {
      return 'DFF';
    },
    colorPanel() {
      return [
      '#000000',
      '#333333',
      '#666666',
      '#a50101',
      '#FF0000',
      '#1d5038',
      '#3BA272',
      '#214695',
      '#5470C6',
      '#814d98',

      '#3668e6',
      '#FF6600',
      '#39C5BB',
      ]
    },
  },
  props: {
  },
  data() {
    return {
      data: {},

      form: {},
      formRules: {
        id: [
          {
            trigger : 'blur',
            message : this.$t('Please input DataFlux Func ID'),
            required: true,
          },
          {
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value && value.indexOf(this.DATAFLUX_FUNC_ID) < 0 || value === this.DATAFLUX_FUNC_ID) {
                let _message = this.$t('This DataFlux Func ID should starts with "{prefix}"', { prefix: this.DATAFLUX_FUNC_ID });
                return callback(new Error(_message));
              }
              return callback();
            },
          },
        ],
      },

      showAdvancedSettings: false,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.ui-color-flavor-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ui-color-flavor-item > * {
  margin-right: 10px;
}
.ui-color-flavor-item div {
  width: 60px;
  height: 15px;
}
.setting-enabled input {
  color: var(--success);
  font-weight: bold;
}
.setting-disabled input {
  color: var(--danger);
  font-weight: bold;
}
.colors {
  color: #3668e6;
  color: #FF6600;
  color: #39C5BB;
  color: #000000;
  color: #333333;
  color: #666666;
  color: #a50101;
  color: #FF0000;
  color: #1d5038;
  color: #3BA272;
  color: #15566f;
  color: #5470C6;
  color: #814d98;
  color: #984781;
}
</style>
